<template>
  <!-- action是上传图像的地址  默认以post的请求方式传递到这个地址图片信息
    http-request  覆盖默认上传行为, 自定义配置
   -->
  <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="upload"
  >
    <!-- <el-progress v-if="percentage" type="circle" :percentage="percentage" />

    <template v-else>
      <img v-if="value" :src="value" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </template> -->

    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>

<script>
// this.$emit('input', '选中的新头像地址交给父组件')// 下午写
// 秘钥
// SecretId: AKIDQgUFpWF1qfUBqMtLkBct48xa2FLSSGrF
// SecretKey: 35CGAudDcorofQNCpIaheWCyohU7hKq9
// 存储桶名称 hm-1305579172
// 存储桶所在区域 ap-beijing

import COS from 'cos-js-sdk-v5'
// 创建腾讯云实例
const cos = new COS({
  SecretId: 'AKIDQgUFpWF1qfUBqMtLkBct48xa2FLSSGrF',
  SecretKey: '35CGAudDcorofQNCpIaheWCyohU7hKq9'
})
export default {
  props: {
    value: { // 图像地址
      type: String,
      default: ''
    }
  },
  data() {
    return {
      percentage: 0
    }
  },
  methods: {
    // 上传前的预校验 校验文件的类型和文件的大小
    beforeAvatarUpload(file) { // file是上传的文件对象
      // console.log(file) // file.type 文件类型
      const list = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp']
      const isAllow = list.includes(file.type)
      // file.size 文件大小 单位是 byte
      const isLt2M = file.size / 1024 / 1024 < 1

      if (!isAllow) {
        this.$message.warning('上传头像图片只能是 JPG/PNG/GIF/BMP 格式!')
        return false // 终止上传
      }
      if (!isLt2M) {
        this.$message.warning('上传头像图片大小不能超过 2MB!')
        return false // 终止上传
      }
      return true
    },
    // 自定义上传
    upload({ file }) { // 解构出文件对象
      console.log(file) // 文件对象
      // 方式一: 前端方式实现图像立即展示
      this.$emit('input', URL.createObjectURL(file))
      // 方式二: 前端方式实现图像立即展示
      // const fd = new FileReader()
      // // 2. 使用readAsDataURL读取文件
      // fd.readAsDataURL(file)
      // // 3. 在onload事件中拿到读取的结果 url地址
      // fd.onload = () => {
      //   console.log(fd.result) // 生成base64格式的图片地址 永久有效  会将图片放大37%体积
      //   this.$emit('input', fd.result)
      // }

      cos.putObject({
        Bucket: 'hm-1305579172', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-beijing', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: Date.now() + file.name, /* 存储在桶里的对象键，必须且唯一的字段字段 */
        Body: file, /* 必须，上传文件对象 */
        onProgress: (progressData) => { // 上传期间持续触发的处理函数
          // console.log(progressData.percent * 100)
          // this.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => { // 上传完成后的处理函数 err是错误对象 data是成功对象 Location就是腾讯云返回的url地址
        console.log(err || data)
        // 将data中的Location 通知父组件 交给父组件
        this.$emit('input', 'https://' + data.Location)
        this.percentage = 0 // 上传完毕后 将进度条隐藏 展示图片
      })
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
